import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  Platform,
  NativeModules,
  DeviceInfo,
  StyleSheet,
  Image,
  Text,
  View,
  TextInput,
  PixelRatio,
  TouchableOpacity,
  ScrollView
} from 'react-native';
var Common = require('./common');
const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
export default class Brand extends Component<Props> {
  static navigationOptions = {
      headerTitle: '',
      tabBarLabel: '',

  };
  constructor(props){
    super(props);
    this.state = {
      str: this.props.navigation.state.params,
      brand:[]
    };
  }

  login(){
    var _this = this;
    Common.ajaxPost(Common.url + 'login.php', function(res){
      if(res.code == "0000"){

      }
    }.bind(this), {verify:'08login',t:''});
  }

  toRegister(){
    this.props.navigation.navigate('Register')
  }

  toDetail(id){
    this.props.navigation.navigate('BrandList',id)
  }
  getThirdData(id,item,arr){
    var _this = this;
    Common.ajaxPost(Common.url + 'brand.php?action=brandlist&section=letter&pid='+id, function(res){
      console.log(id)
      console.log(res)
      if(res.code == 1){

        var data = res.data;
        item.list=[];
        for(var obj in data){
          console.log(data[obj])

          item.list=item.list.concat(data[obj]);

        }
        console.log(item)
        arr.push(item);
        this.setState({
          brand:arr
        })
      }
    }.bind(this), {verify:'08login',t:''});
  }
  getData(id){
    var _this = this;
    Common.ajaxPost(Common.url + 'brand.php?action=brandlist&section=letter&pid='+id, function(res){
      console.log(id)
      console.log(res)
      if(res.code == 1){

        var data = res.data;
        var arr = [];
        for(var obj in data){
          _this.getThirdData(data[obj][0].ccid,data[obj][0],arr);
        }

      }
    }.bind(this), {verify:'08login',t:''});
  }

  renderBrand(brand){
    var _this = this;
    var bgColor = '#fff';
    return brand.map(function(data, index){
      return (
        <View key={index}>
          <Text style={styles.brand}>{data.title}</Text>
          {_this.renderSubBrand(data.list)}
        </View>

      );
    })
  }
  renderSubBrand(subBrand){
    var _this = this;
    var bgColor = '#fff';
    return subBrand.map(function(item, index){
      var ccid = item.ccid;
      return (
        <TouchableOpacity key={index} style={styles.subItem} onPress={_this.toDetail.bind(_this,ccid)}>

          <Text style={styles.txt}>{item.title}</Text>
          <Image style={{width:22,height:22,}} source={require('./images/jiantou.png')} />

        </TouchableOpacity>

      );
    })
  }


  componentDidMount(){
    this.getData(this.state.str)
    // console.log(this.props.navigation.state.params)
    // if(this.props.navigation.state.params.from){
    //   this.setState({
    //     from:this.props.navigation.state.params,
    //   })
    // }
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <ScrollView style={styles.container}>
        {this.renderBrand(this.state.brand)}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height:Common.screenHeight,
    backgroundColor: '#fff',
  },
  brand:{
    backgroundColor:'#f5f5f5',
    color:'#333',
    fontSize:16,
    paddingLeft:20,
    paddingTop:5,
    paddingBottom:5,
  },
  subItem:{
    height:36,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
    borderBottomColor:'#e9e9e9',
    borderBottomWidth:1,
    paddingLeft:20,
    paddingRight:20,
  },
  txt:{
    fontSize:14,
    color:'rgb(72,72,72)'
  }

});
